<label class="flex item p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden">
  <span *ngIf="label()" class="mr-1">{{label()}}</span>
  @if (label$ | async; as label) {
    <mat-icon *ngIf="label.icon" displayDensity="compact">{{ label.icon }}</mat-icon>
    <span>
      {{ 'COMPONENTS.COMMON.'+(label?.label ?? 'DIMENSION_MEASURE') | translate: {Default: label?.label ?? 'Dimension/Measure'} }}
    </span>
  }
</label>

<div class="select-container flex flex-col items-stretch gap-2 w-full max-w-full p-1 text-xs rounded-lg 
  ring-offset-1 ring-offset-transparent ring-2 ring-transparent hover:ring-yellow-500/50">
  <form [formGroup]="formGroup" class="relative flex-1 max-w-full flex justify-start items-center">
    <div class="flex items-center">
      <ng-content select="[ngmPrefix]"></ng-content>
    </div>
    <mat-select #propertySelect formControlName="dimension" class="overflow-hidden flex-1"
      panelClass="ngm-property-select__panel ngm-select-panel ngm-density__cosy" 
      [required]="required()">
      <mat-select-trigger *ngIf="selectTrigger()" class="flex items-center overflow-hidden pl-2">
        <ngm-entity-property hiddenIcon [property]="selectTrigger()" class="flex-1" ></ngm-entity-property>

        <div class="flex items-center" displayDensity="compact">

          <button matSuffix mat-icon-button (click)="$event.stopPropagation();$event.preventDefault();showMore.set(!showMore())">
            <mat-icon *ngIf="!showMore()">expand_more</mat-icon>
            <mat-icon *ngIf="showMore()">expand_less</mat-icon>
          </button>

          <button mat-icon-button *ngIf="showAttributes()" [displayDensity]="displayDensity()"
            [matMenuTriggerFor]="dimensionMenu"
            #mt="matMenuTrigger"
            [class.active]="mt.menuOpen"
            (click)="$event.stopPropagation();$event.preventDefault();">
              <mat-icon>more_vert</mat-icon>
          </button>
    
          <button mat-icon-button *ngIf="hierarchies$ | async" [displayDensity]="displayDensity()"
            [matMenuTriggerFor]="hierarchyMenu"
            #mt="matMenuTrigger"
            [class.active]="mt.menuOpen"
            (click)="$event.stopPropagation();$event.preventDefault();">
              <mat-icon fontSet="material-icons-outlined">account_tree</mat-icon>
          </button>
    
          <button mat-icon-button *ngIf="membersSignal()" [displayDensity]="displayDensity()"
            [matMenuTriggerFor]="membersMenu"
            #mt="matMenuTrigger"
            [class.active]="mt.menuOpen"
            (click)="$event.stopPropagation();$event.preventDefault();">
              <mat-icon>straighten</mat-icon>
          </button>
          
        </div>
      </mat-select-trigger>

      <ngm-search class="w-full px-1" displayDensity="cosy" [formControl]="searchControl"
        (keydown)="onSearchKeydown($event)"
        (click)="$event.stopPropagation()"></ngm-search>

      <mat-optgroup *ngIf="showDimension" [label]=" 'COMPONENTS.PROPERTY.DIMENSIONS' | translate: {Default: 'Dimensions'} ">
        <mat-option [value]="property.name" *ngFor="let property of dimensions$ | async; trackBy: trackByName">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [displayDensity]="DisplayDensity.cosy" [highlight]="search"></ngm-entity-property>
        </mat-option>
      </mat-optgroup>

      <mat-optgroup *ngIf="showMeasure" [label]=" 'COMPONENTS.PROPERTY.CALCULATIONS' | translate: {Default: 'Calculations'} ">
        <mat-option *ngFor="let property of calculations$ | async" [value]="property.name">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [highlight]="search"></ngm-entity-property>
        </mat-option>
        <mat-option *ngIf="editable()" class="ngm-property-select__action" [value]="null"
          (click)="$event.stopPropagation();$event.preventDefault();">
          <button mat-button color="primary" ngmAppearance="dashed" class="ngm-property-select__create-calculation w-full"
            (click)="$event.stopPropagation();onCreateCalculation($event)">
            <div class="flex justify-center items-center whitespace-nowrap text-ellipsis overflow-hidden">
              <mat-icon>add</mat-icon>
              <span>{{ 'COMPONENTS.PROPERTY.CREATE_CALCULATION' | translate: {Default: 'Create Calculation'} }}</span>
            </div>
          </button>
        </mat-option>
      </mat-optgroup>

      <mat-optgroup *ngIf="showMeasureControl" [label]=" 'COMPONENTS.PROPERTY.MEASURE_CONTROLS' | translate: {Default: 'Measure Controls'} ">
        <mat-option *ngFor="let property of measureControls$ | async" [value]="property.name">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [highlight]="search"></ngm-entity-property>
        </mat-option>

        <mat-option *ngIf="editable()">
          <button mat-button color="primary" ngmAppearance="dashed" (click)="onCreateCalculation($event, CalculationType.MeasureControl)">
            <mat-icon>add</mat-icon>
            {{ 'COMPONENTS.PROPERTY.CREATE_MEASURE_CONTROL' | translate: {Default: 'Create Measure Control'} }}
          </button>
        </mat-option>
      </mat-optgroup>

      <mat-optgroup *ngIf="showMeasure" [label]=" 'COMPONENTS.PROPERTY.MEASURES' | translate: {Default: 'Measures'} ">
        <mat-option *ngFor="let property of notCalculations$ | async" [value]="property.name">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [highlight]="search"></ngm-entity-property>
        </mat-option>
      </mat-optgroup>

      <mat-optgroup *ngIf="showParameter" [label]=" 'COMPONENTS.PROPERTY.PARAMETERS' | translate: {Default: 'Parameters'} ">
        <mat-option *ngFor="let property of parameters$ | async" [value]="property.name">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [highlight]="search"></ngm-entity-property>
        </mat-option>
      </mat-optgroup>

      <mat-optgroup *ngIf="showMeasure" [label]=" 'COMPONENTS.PROPERTY.INDICATORS' | translate: {Default: 'Indicators'} ">
        <mat-option *ngFor="let property of indicators$ | async" [value]="property.name">
          <ngm-entity-property class="flex-1" [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" [highlight]="search"></ngm-entity-property>
        </mat-option>
      </mat-optgroup>
    </mat-select>
    
    <div class="absolute left-0 top-0 h-full max-w-full flex items-center overflow-hidden">
      @if (entityTypeLoading()) {
        <mat-spinner
          [diameter]="20"
          [strokeWidth]="1"
        />
      }

      @if (error()) {
        <div class="mat-error overflow-hidden text-ellipsis whitespace-nowrap">{{error()}}</div>
      }
    </div>

    <ng-content select="[ngmSuffix]"></ng-content>
  </form>

  <div *ngIf="showMore()" class="min-h-12 w-full flex justify-center items-center">
    <ng-content></ng-content>
  </div>
</div>

<mat-menu #dimensionMenu="matMenu" class="ngm-formly ngm-density__compact">
  <button mat-menu-item *ngIf="showDisplayAs()" disableRipple [matMenuTriggerFor]="displayMenu">
    <mat-icon class="shrink-0">dvr</mat-icon>
    <span>{{ 'COMPONENTS.PROPERTY.DisplayAs' | translate: {Default: "Display As"} }}...</span>
  </button>

  <button mat-menu-item *ngIf="labels$ | async as labels" disableRipple [matMenuTriggerFor]="labelMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">label</mat-icon>
    <span>{{ 'COMPONENTS.PROPERTY.Label' | translate: {Default: "Label"} }}</span>
  </button>

  <button mat-menu-item (click)="$event.stopPropagation();$event.preventDefault();">
    <ngm-input class="w-full flex-row" style="flex-direction: row; align-items: center;"
      label="{{ 'COMPONENTS.PROPERTY.Caption' | translate: {Default: 'Caption'} }}"
      [(ngModel)]="caption"
      (keydown.space)="$event.stopPropagation();$event.preventDefault();"
    ></ngm-input>
  </button>

  <ng-container *ngIf="isMeasure$ | async">
    <button mat-menu-item *ngIf="showMeasureAttributes" (click)="openFormatting($event)">
      <mat-icon class="shrink-0">monetization_on</mat-icon>
      <span>{{ 'COMPONENTS.PROPERTY.Formatter' | translate: {Default: "Formatter"} }}</span>
    </button>
  
    <button mat-menu-item *ngIf="calculationProperty() as calculationProperty"
      (click)="$event.preventDefault();openEditCalculation(calculationProperty)">
        <mat-icon class="shrink-0">functions</mat-icon>
        <span fontSet="material-icons-outlined">
          {{ 'COMPONENTS.PROPERTY.EditFormula' | translate: {Default: "Edit Formula"} }}
        </span>
    </button>
  </ng-container>

  <ng-container *ngIf="isParameter()">
    <button mat-menu-item (click)="openEditParameter()">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">edit</mat-icon>
      <span>{{ 'COMPONENTS.PROPERTY.PARAMETER' | translate: {Default: "Parameter"} }}</span>
    </button>
  </ng-container>

  <button mat-menu-item *ngIf="isDimension()" disableRipple (click)="$event.stopPropagation();">
    <mat-checkbox [(ngModel)]="unbookedData">
      {{ 'COMPONENTS.PROPERTY.UnbookedData' | translate: {Default: "Unbooked Data"} }}
    </mat-checkbox>
  </button>

  <button mat-menu-item *ngIf="isDimension() || showMeasureAttributes" disableRipple (click)="$event.stopPropagation();">
    <mat-checkbox [(ngModel)]="zeroSuppression">
      {{ 'COMPONENTS.PROPERTY.ZeroSuppression' | translate: {Default: "Zero Suppression"} }}
    </mat-checkbox>
  </button>

  <button mat-menu-item *ngIf="showOrder" disableRipple [matMenuTriggerFor]="orderMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-round">sort_by_alpha</mat-icon>
    <span>{{ 'COMPONENTS.PROPERTY.Order' | translate: {Default: "Order"} }}</span>
  </button>
  
</mat-menu>

<mat-radio-group [(ngModel)]="displayBehaviour">
  <mat-menu #displayMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple *ngFor="let behaviour of DISPLAY_BEHAVIOUR_LIST"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="behaviour.value">
        {{ 'COMPONENTS.PROPERTY.' + behaviour.label | translate: {Default: behaviour.label} }}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="memberCaption">
  <mat-menu #labelMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple
      (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" [value]="null">
        {{ 'COMPONENTS.PROPERTY.Auto' | translate: {Default: "Auto"} }}
      </mat-radio-button>
    </button>

    @for (item of labels$ | async; track item.name) {
      <button mat-menu-item disableRipple
        (click)="$event.stopPropagation();">
        <mat-radio-button class="ngm-radio-button__property" [value]="item.name" [title]="item.caption">
          {{item.caption}}
        </mat-radio-button>
      </button>
    }
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="level">
  <mat-menu #hierarchyMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple [matMenuTriggerFor]="hierarchiesMenu">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">account_tree</mat-icon>
      <span>{{ 'COMPONENTS.PROPERTY.HIERARCHY' | translate: {Default: "Hierarchy"} }}...</span>
    </button>
  
    <mat-divider></mat-divider>

    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button [value]="null" class="ngm-radio-button__property">
        {{ 'COMPONENTS.PROPERTY.Default' | translate: {Default: "Default"} }}
      </mat-radio-button>
    </button>
    @for (property of levels$ | async; track property.name) {
      <button mat-menu-item disableRipple
        (click)="$event.stopPropagation();">
        <mat-radio-button [value]="property.name" class="ngm-radio-button__property">
          <ngm-entity-property class="w-full" hiddenIcon [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto" />
        </mat-radio-button>
      </button>
    }
  
    <mat-divider></mat-divider>
  
    <button mat-menu-item disableRipple (click)="selectMembers($event)">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">people_outline</mat-icon>
      <span [matBadgeHidden]="!members?.length" [matBadge]="members?.length" matBadgeColor="accent" matBadgeOverlap="false"
        [class.line-through.decoration-pink-500]="exclude"
      >
        {{ 'COMPONENTS.PROPERTY.MEMBERS' | translate: {Default: "Members"} }}
      </span>
    </button>

    <button mat-menu-item disableRipple [matMenuTriggerFor]="memberMenu">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">alternate_email</mat-icon>
      <span [matBadge]="parameter ? 1 : null" matBadgeColor="accent" matBadgeOverlap="false">
        {{ 'COMPONENTS.PROPERTY.PARAMETER' | translate: {Default: "Parameter"} }}
      </span>
    </button>

    <button mat-menu-item *ngIf="showAttributes()" disableRipple [matMenuTriggerFor]="propertiesMenu">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">extension</mat-icon>
      {{ 'COMPONENTS.PROPERTY.PropertyList' | translate: {Default: "Property List"} }}
      
    </button>

    <button mat-menu-item *ngIf="showAttributes()" disableRipple (click)="$event.stopPropagation();">
      <mat-checkbox [(ngModel)]="displayHierarchy" style="width: 100%;">
        {{ 'COMPONENTS.PROPERTY.DisplayHierarchy' | translate: {Default: "Display as Hierarchy"} }}
      </mat-checkbox>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="hierarchy">
  <mat-menu #hierarchiesMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" [value]="null">
        {{ 'COMPONENTS.PROPERTY.Default' | translate: {Default: "Default"} }}
      </mat-radio-button>
    </button>
    <button mat-menu-item disableRipple *ngFor="let property of hierarchies$ | async; trackBy: trackByName"
      (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" [value]="property.name">
        <ngm-entity-property class="w-full" hiddenIcon [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto"></ngm-entity-property>
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-menu #membersMenu="matMenu" class="ngm-density__compact">
  <button mat-menu-item class="w-full" disableRipple *ngFor="let property of membersSignal(); trackBy: trackByName"
    (click)="$event.stopPropagation();">
    <mat-checkbox class="ngm-checkbox__property" [checked]="$any(property).selected" (change)="toggleMember(property.name, $event.checked)">
      <ngm-entity-property class="w-full" hiddenIcon [property]="property" [displayBehaviour]="DISPLAY_BEHAVIOUR.auto"></ngm-entity-property>
    </mat-checkbox>
  </button>
</mat-menu>

<mat-menu #propertiesMenu="matMenu" class="ngm-formly ngm-density__compact">
  <mat-selection-list [(ngModel)]="properties" displayDensity="compact">
    <mat-list-option *ngFor="let property of properties$ | async" [value]="property.name"
      (click)="$event.stopPropagation();">
      {{ property.caption }}
    </mat-list-option>
  </mat-selection-list>
</mat-menu>

<mat-radio-group [(ngModel)]="parameter">
  <mat-menu #memberMenu="matMenu" class="ngm-property-select__parameter-menu ngm-density__compact">
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button [value]="null">
        {{ 'COMPONENTS.COMMON.None' | translate: {Default: "None"} }}
      </mat-radio-button>
    </button>

    <button mat-menu-item disableRipple *ngFor="let option of parameters$ | async"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="option.name">
        {{ option.caption || option.name }}
      </mat-radio-button>

      <button mat-icon-button displayDensity="cosy" (click)="openEditParameter(option.name)">
        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
      </button>
    </button>
  
    <mat-divider></mat-divider>

    <button mat-menu-item disableRipple ngmAppearance="dashed" (click)="$event.stopPropagation();openCreateParameter()">
      <mat-icon class="shrink-0" fontSet="material-icons-outlined">add</mat-icon>
      <span>{{ 'COMPONENTS.PROPERTY.CreateParameter' | translate: {Default: "Create Parameter"} }}</span>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="order">
  <mat-menu #orderMenu="matMenu" class="ngm-density__compact">
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" [value]="null">
        {{ 'COMPONENTS.PROPERTY.None' | translate: {Default: "None"} }}
      </mat-radio-button>
    </button>

    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" value="ASC">
        {{ 'COMPONENTS.PROPERTY.Order_ASC' | translate: {Default: "ASC"} }}
      </mat-radio-button>
    </button>
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button class="ngm-radio-button__property" value="DESC">
        {{ 'COMPONENTS.PROPERTY.Order_DESC' | translate: {Default: "DESC"} }}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>
